<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>我的积分</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">

    <!--- 图表--->
    <script src="js/Chart.js"></script>
</head>
<body >
<div class="myIntegralBody">
    <div  class="mian layui-carousel layui-col-xs12 layui-col-sm12 layui-col-md12" id="app">
        <!-- 头部分-->
        <div class="layui-row tl-top">
            <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-leftalign">
                <img src="img/img/icon_back.png"/>
            </div>
            <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-align">
                我的积分
            </div>
            <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-rightalign">

            </div>
        </div>
        <!-- 主体-->
        <div class="cent">
            <!-- 用户基本信息-->
            <div class="apple-banner userBox">
                <!-- 用户头像-->
                <div class="user">
                    <div class="imgBoxs" >
                        <canvas id="canvas" width="200" height="200"></canvas>
                        <!--<img src="img/img/pic_myjifen_yuanhuan.png"/>-->
                        <div class="integralNubmer">
                            <p>积分余额</p>
                            <p class="Nubmer">999999 </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 我的积分-->
            <!--<div class="myIntegralBox layui-row">-->
            <!--<div class="borderRiu">-->
            <!--<div class="layui-row " style="padding: 5px 0px;">-->
            <!--<div class="layui-col-xs5 layui-col-sm5 layui-col-md5">-->
            <!--<div class="myIntegral">-->
            <!--&lt;!&ndash; 我的积分Icon&ndash;&gt;-->
            <!--<span class="red">-->
            <!--<img src="img/img/icon_myjifen.png"/>-->
            <!--</span>-->
            <!--<span >我的积分</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-xs-offset2">-->
            <!--<div class="chartIntegral">-->
            <!--<span class="lableRight"> 查看积分明细 <i class="layui-icon" style="margin-left: 5px;">&#xe602;</i></span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; 我的积分列表&ndash;&gt;-->
            <!--<div class="layui-row IntegralNubmer ">-->
            <!--&lt;!&ndash; 积分余额&ndash;&gt;-->
            <!--<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">-->
            <!--<div class="">-->
            <!--<p class=""> 积分余额</p>-->
            <!--<p> 3000</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; 购物积分&ndash;&gt;-->
            <!--<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">-->
            <!--<div class="">-->
            <!--<p class=""> 购物积分</p>-->
            <!--<p> 3000</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; 购物积分&ndash;&gt;-->
            <!--<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">-->
            <!--<div class="">-->
            <!--<p class=""> 购物积分</span>-->
            <!--<p> 3000</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!-- 功能板块-->
            <div class="activity ">
                <div class="activityCent layui-row">
                    <div class="boder layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="card layui-row">
                            <div class=" layui-col-xs2 layui-col-sm2 layui-col-md2">
                                <div class="imgBoxs" >
                                    <img src="img/img/icon_detail_shopping.png"/>
                                </div>
                            </div>
                            <div class=" layui-col-xs7 layui-col-sm7 layui-col-md7">
                                <p  class="title"> 积分商城</p>
                                <p> 商城购物所奖励的积分 </p>
                            </div>
                            <div class=" layui-col-xs3 layui-col-sm2 layui-col-md3">
                                <p class="red"> 999999999999999999999999</p>
                            </div>
                        </div>
                    </div>
                    <div class="boder layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="card layui-row">
                            <div class=" layui-col-xs2 layui-col-sm2 layui-col-md2">
                                <div class="imgBoxs" >
                                    <img src="img/img/icon_detail_walfare.png"/>
                                </div>
                            </div>
                            <div class=" layui-col-xs7 layui-col-sm7 layui-col-md7">
                                <p  class="title">福利积分</p>
                                <p> 商城购物所奖励的积分 </p>
                            </div>
                            <div class=" layui-col-xs3 layui-col-sm2 layui-col-md3">
                                <p class="red"> 999999999999999999999999</p>
                            </div>
                        </div>
                    </div>
                    <div class="boder layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="card layui-row">
                            <div class=" layui-col-xs2 layui-col-sm2 layui-col-md2">
                                <div class="imgBoxs" >
                                    <img src="img/img/icon_detail_bonus.png"/>
                                </div>
                            </div>
                            <div class=" layui-col-xs7 layui-col-sm7 layui-col-md7">
                                <p  class="title">奖金积分</p>
                                <p> 商城购物所奖励的积分 </p>
                            </div>
                            <div class=" layui-col-xs3 layui-col-sm2 layui-col-md3">
                                <p class="red"> 999999999999999999999999</p>
                            </div>
                        </div>
                    </div>
                    <div class="boder layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="card layui-row">
                            <div class=" layui-col-xs2 layui-col-sm2 layui-col-md2">
                                <div class="imgBoxs" >
                                    <img src="img/img/icon_detail_cash.png"/>
                                </div>
                            </div>
                            <div class=" layui-col-xs7 layui-col-sm8 layui-col-md7">
                                <p  class="title">现金商城</p>
                                <p> 商城购物所奖励的积分 </p>
                            </div>
                            <div class=" layui-col-xs3 layui-col-sm2 layui-col-md3">
                                <p class="red"> 999999999999999999999999</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer layui-row">
    <div class="listTop layui-row">
        <div class="span2">
            <div class="imgBoxs">
                <img src="img/img/icon_tab_shop_select.png"/>
            </div>
            <p class="listTypes"> 商店 </p>
        </div>
        <div class="span2">
            <div class="imgBoxs">
                <img src="img/img/icon_tab_fenlei_select.png"/>
            </div>
            <p class="listTypes"> 分类 </p>
        </div>
        <div class="span2" style=" position: relative;height:10px">
            <div class="imgBoxs shopping">
                <img src="img/img/btn_tab_shopping_select.png"/>
            </div>
        </div>
        <div class="span2">
            <div class="imgBoxs">
                <img src="img/img/icon_tab_team_select.png"/>
            </div>
            <p class="listTypes"> 团队 </p>
        </div>
        <div class="span2">
            <div class="imgBoxs">
                <img src="img/img/icon_tab_my_selected.png"/>
            </div>
            <p class="listTypes"> 我的 </p>
        </div>
    </div>
</div>
<script>
    layui.use(['carousel', 'form'], function(){
        var layer = layui.layer,
            carousel = layui.carousel,
            form = layui.form;
        layer.msg('开始我们的代码开发');
        // 顶部图标统计
        var doughnutData = [
            {
                value: 8000,
                color:"#f05165"
            },
            {
                value : 3000,
                color : "#4a90e2"
            },
            {
                value : 1200,
                color : "#f5a623"
            },
            {
                value : 900,
                color : "#7dd220"
            },
        ];
        var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
    });
</script>
</body>
</html>
